<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  
  <style type="text/css">
  
  
  
  </style>
  <script>
  if (!window.console || !console.firebug){
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
 
    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}

</script>


<body>
  <div id="app">
    <template v-if="loginType === 'username'">
	  <label>Username</label>
	  <input placeholder="enter your username" key="username-input">
	  </template>
	<template v-else>
	  <label>email</lebal>
	  <input placeholder="enter your email address" key="email-input">
	  </template>
	<button v-on:click="change">toggle </button>

  </div>
  

<script>
  var vm = new Vue({
    el:'#app',
	data:{
	  loginType:'username'
	
	},
	methods:{
	  change:function(){
	    this.loginType=false
	  
	  }
	
	
	}
  
  
  })

</script>




</body>
</html>